import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	List,
	Tools,
	Button,
	Tabs,
} from "weaver-mobile";
import {
	withRouter
} from 'react-router-dom';
import {
	Form
} from 'weaver-mobile-page';
import Portrait from './Portrait.js';
import Picture from './Picture.js';
import NoData from './NoData.js';
import '../../style/personInfo.less';
const getLabel = Tools.getLabel;

@inject('personInfoStore')
@withRouter
@observer
export default class PersonInfo extends Component {
	componentDidMount() {
		this.props.personInfoStore.init();
	}

	getAvaterPortraitElement = () => {
		const {
			personInfoStore
		} = this.props, {
			hasProtraitRow,
			hasPictureRow,
			handlePortraitClick,
			handlePictureClick,
		} = personInfoStore;

		return (
			<div className='portrait-picture'>
				{
					hasProtraitRow && (
						<div className='portrait-item' onClick={handlePortraitClick}>
							<Portrait store={personInfoStore}/>
						</div>
					)
				}
				{
					hasPictureRow && (
						<div className='picture-item' onClick={handlePictureClick}>
							<Picture store={personInfoStore}/>
						</div>
					)
				}
			</div>
		)
	}

	getFields = (oindex) => {
		const {
			personInfoStore
		} = this.props, {
			basicForm,
			personalForm,
			basicInfoIndex,
		} = personInfoStore;

		const {conditioninfo,isInit} = (oindex === 0) ? basicForm : personalForm;

		const fields = [];

		if (isInit) {
			conditioninfo.forEach( (group,index) => {
				const {
					title,
					items
				} = group;

				if (group.hide) {
					return ;
				}

				fields.push(
					<List renderHeader={() => title} key={title}>
						{
							(oindex === 0 && index === basicInfoIndex) && (
								this.getAvaterPortraitElement()
							)
						}
				        {
				        	items.map(item => {
								if (
									(item.otherParams && item.otherParams.hide) ||
									(!item.otherParams && item.hide)
								) {
									return null;
								}

								return (
									<Form.Item
							            key={item.domkey.join('__')}
							            form={(oindex === 0 ) ? basicForm : personalForm}
							            fieldConfig={item}
							            onChange={ (item,value)=>{
							            	(oindex === 0) ? basicForm.onChange(item,value) : personalForm.onChange(item,value)
							            }}
							            fieldWillRender={(item, formParams)=>{
							            	const{accounttype}=formParams;
							            	if (item.domkey[0] === 'belongto' && accounttype === '0') {
												return false;
											}
							            }}
							          />
						        );
							})
				        } 
			 		</List>
				)	
			});
		}
		return fields;
	}

	render() {
		const {
			personInfoStore: store
		} = this.props, {
			isPageInit,
			tabDatas,
			handleTabClick,
			hasEditableFormElement,
			save,
		} = store;

		if (!isPageInit) {
			return null;
		}

		if (!hasEditableFormElement) {
			return <NoData />
		}

		return (
			<div className='hrm-person-info'>
				<Tabs
					tabs={tabDatas}
					initialPage={0}
					onTabClick={handleTabClick}
				>
					{
						['a','b'].map( (key,index) => {
							return (
								<div key={key} className="person-info-wrap">
									<Form style={{ height: '100%' }} >
									 	{this.getFields(index)}
								    </Form>
								</div>
							)
						})
					}
				</Tabs>
				<Button type="primary" className='save' onClick={save}>{getLabel(86,'保存')}</Button>
			</div>
		);
	}
}